import React, { useState, useEffect } from 'react';
import { Layout, Menu, Button, message } from 'antd';
import {
  UploadOutlined,
  SearchOutlined,
  HistoryOutlined,
  LogoutOutlined,
  RobotOutlined
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import UploadPage from './UploadPage';
import QueryPage from './QueryPage';
import HistoryPage from './HistoryPage';
import AIModelPage from './AIModelPage';

const { Header, Sider, Content } = Layout;

const AdminPage = () => {
  const [currentMenu, setCurrentMenu] = useState('upload');
  const [username, setUsername] = useState('');
  const navigate = useNavigate();

  useEffect(() => {
    // 检查登录状态
    const token = localStorage.getItem('token');
    const storedUsername = localStorage.getItem('username');
    
    if (!token) {
      navigate('/login');
      return;
    }
    
    setUsername(storedUsername || 'admin');
  }, [navigate]);

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('username');
    message.success('已退出登录');
    navigate('/login');
  };

  const renderContent = () => {
    switch (currentMenu) {
      case 'upload':
        return <UploadPage />;
      case 'query':
        return <QueryPage />;
      case 'history':
        return <HistoryPage />;
      case 'aimodel':
        return <AIModelPage />;
      default:
        return <UploadPage />;
    }
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{
        background: '#fff',
        padding: '0 24px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <h1 style={{ margin: 0, fontSize: '20px' }}>学生月考成绩管理系统</h1>
        <div>
          <span style={{ marginRight: 16 }}>欢迎，{username}</span>
          <Button
            icon={<LogoutOutlined />}
            onClick={handleLogout}
          >
            退出
          </Button>
        </div>
      </Header>
      <Layout>
        <Sider width={200} style={{ background: '#fff' }}>
          <Menu
            mode="inline"
            selectedKeys={[currentMenu]}
            onClick={({ key }) => setCurrentMenu(key)}
            style={{ height: '100%', borderRight: 0 }}
            items={[
              {
                key: 'upload',
                icon: <UploadOutlined />,
                label: '上传成绩'
              },
              {
                key: 'query',
                icon: <SearchOutlined />,
                label: '查询成绩'
              },
              {
                key: 'history',
                icon: <HistoryOutlined />,
                label: '导入历史'
              },
              {
                key: 'aimodel',
                icon: <RobotOutlined />,
                label: 'AI 模型配置'
              }
            ]}
          />
        </Sider>
        <Layout style={{ padding: '24px' }}>
          <Content
            style={{
              background: '#fff',
              padding: 24,
              margin: 0,
              minHeight: 280,
              borderRadius: '8px'
            }}
          >
            {renderContent()}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default AdminPage;
